<template>
    <div class="classify">
        <!--搜索header-->
        <div class="header_search" style="text-align: center">
        	<img @click="goBack()" class="back" src="../../assets/img/back.png" alt="">
            <div class="search_ipt">
                <img src="../../assets/img/search_icon.png" alt="" @click="search()">
                <input id="search" type="search" class="mui-input-clear" placeholder="搜索商品、品类" v-model="keyWord" @keyup="show($event)">
            </div>
        </div>
        <div class="content">
            <ul class="classify_menu vertical-list">
                <li  v-for="(category,index) in f_category" @click="getCategory(category)" :class="{'active': current_category_id === category.id}">
                    {{category.name}}
                </li>
            </ul>
            <div class="classify_goods">
                <ul class="item_classify vertical-list clear">
                    <li v-for="category in t_category">
                        <ul class="horizontal-list clear">
                            <span class="item_title"><span class="line mr10"></span>{{category.name}}<span class="line ml10"></span></span>
                            <li v-for="sub_category in category.categories"><router-link :to="{path:'/item_classify',query:{category_id:sub_category.id,tcategory_name:sub_category.name}}"><img :src="imageDomain+sub_category.image" alt="">{{sub_category.name}}</router-link></li>
                        </ul>
                    </li>
                </ul>
            </div>
        </div>
        <!--footer-->
        <!--<ul class="footer horizontal-list clear">
            <li><router-link :to="{path:'/'}"><img src="../../assets/img/footer1.png" alt=""></router-link></li>
            <li><img src="../../assets/img/footer2_active.png" alt=""></li>
            <li><img style="width: 35px" src="../../assets/img/footer3.png" alt=""></li>
            <li><img src="../../assets/img/footer4.png" alt=""></li>
        </ul>-->
    </div>
</template>

<style>
    @import url("./classify.css");
    @import url('../../assets/css/swiper.css');
</style>
<script>
    import API from '../../assets/js/API'
    import Layer from '../../assets/js/MessageBox'
    export default {
        data() {
            return {
                f_category: [],
                t_category: [],
                init_category: {},
                current_category_id : 0,
                imageDomain : API.imageDomain,
                keyWord:''
            }
        },
        created() {
              window.scrollTo(0,0);
            //所有分类
            let url = API.serviceDomain + API.firstCategories;
            this.$http.get(url).then(
                (res) => {
                    if (res.body.status == '000000') {
                        this.f_category = res.body.data;
                        this.init_category = res.body.data[0];
                        this.current_category_id = this.init_category.id;
                        if(this.init_category != null){
                            let url = API.serviceDomain + API.thirdCategories+'/'+this.init_category.id;
                            this.$http.get(url).then(
                                (res) => {
                                    if (res.body.status == '000000') {
                                        this.t_category = res.body.data;
                                    } else {
                                        Layer.showMsg(res.body.message);
                                    }
                                },
                                (error) => {
                                    Layer.showMsg("服务器开小差了...")
                                    return
                                }
                            )
                        }
                    } else {
                        Layer.showMsg(res.body.message);
                    }
                },
                (error) => {
                    Layer.showMsg("服务器开小差了...")
                    return
                }
            )
        },
        mounted() {

        },
        methods: {
        	 goBack() {
                this.$router.goBack()
            },
            getCategory(firstCatrgory){
                let url = API.serviceDomain + API.thirdCategories+'/'+firstCatrgory.id;
                this.$http.get(url).then(
                    (res) => {
                        if (res.body.status == '000000') {
                            this.current_category_id = firstCatrgory.id;
                            this.t_category = res.body.data;
                            window.scrollTo(0,0);
                        } else {
                            Layer.showMsg(res.body.message);
                        }
                    },
                    (error) => {
                        Layer.showMsg("服务器开小差了...")
                        return
                    }
                )
            },
            goBack() {
                this.$router.goBack()
            },
            search(){
              this.$router.push({path:'/item_classify',query:{'keyWord':this.keyWord}})
            },
            show(ev) {
                if(ev.keyCode==13){
                    this.$router.push({path:'/item_classify',query:{'keyWord':this.keyWord}})
                }
            }
        }
    }
</script>
